---
title: Basic Editor
slug: /basic-editor
---

:::note

We're using flexible playgrounds for live editing React code.

:::

### Default Editor

Let's start with the smallest editor implementation.

```tsx
import React from 'react';
import { Plate } from '@udecode/plate'
```

```tsx live
() => <Plate />
```

This looks the same than a `<textarea>`.

### Styling

Let's add a placeholder and some padding using `editableProps` props.

```tsx live
() => {
  const editableProps = {
    placeholder: 'Type…',
    style: {
      padding: '15px',
    },
  };

  return <Plate id="1" editableProps={editableProps} />;
}
```

:::note

Once you render multiple `Plate`, you'll need to pass unique `id` to each.
This is optional for the first one.

:::

### Value

Let's set the initial value of the editor to one block of text.

```tsx live
() => {
  const initialValuePlainText = [
    {
      children: [
        {
          text:
            'This is editable plain text with react and history plugins, just like a <textarea>!',
        },
      ],
    },
  ];

  return (
    <Plate
      id="2"
      editableProps={editableProps}
      initialValue={initialValuePlainText}
    />
  );
}
```

### Change Handler

Now we would like to listen to editor changes so we can save the value somewhere.
Let's use `onChange` props.

```tsx live
() => {
  const [debugValue, setDebugValue] = useState(null);

  return (
    <Plate
      id="3"
      editableProps={editableProps}
      initialValue={initialValuePlainText}
      onChange={(newValue) => {
        setDebugValue(newValue);
        // save newValue...
      }}
    >
      value: {JSON.stringify(debugValue)}
    </Plate>
  );
}
```

:::note

`Plate` children are rendered just before the editable component.

:::

Now we're ready to use plugins!
